<template>
  <el-row class="container" :gutter="14">
    <el-col :lg="15">
      <div class="content">
        <div class="fx">
          <div class="order_id">单据ID:{{ eventData.event.id }}</div>
          <el-tag v-if="eventData.event.status == 0" color="pink">单据状态:待处理</el-tag>
          <el-tag v-if="eventData.event.status == 1" color="red">单据状态:待处理</el-tag>
          <el-tag v-if="eventData.event.status == 2" color="#1a91ff">单据状态:待处理</el-tag>

          <el-tag v-if="eventData.event.channelStatus == 0" color="pink">渠道状态:待处理</el-tag>
          <el-tag v-if="eventData.event.channelStatus == 1" color="red">渠道状态:通过</el-tag>
          <el-tag v-if="eventData.event.channelStatus == 2" color="#1a91ff">渠道状态:拒绝</el-tag>
        </div>
        <div class="remark">违规备注</div>
        <div class="info">
          <div>业务线:{{ bizTypeEnum[eventData.order.bizType] }}</div>
          <div>内容:{{ eventData.event.content }}</div>
          <div>剩余申诉次数:</div>
          <div>创建时间:{{ eventData.event.createTime }}</div>
          <div>类型:{{ eventData.event.type == 1 ? "客服事件" : "判罚事件" }}</div>
          <div>
            附件:
            <a v-for="(item, index) in eventData.event.file" :key="item" download :href="item.url">附件{{ index + 1 }}</a>
          </div>
        </div>
        <el-divider style="margin: 14px 0" />
        <div class="table">
          <h3>补充信息</h3>
          <div class="detail">
            <div class="title">
              <div v-for="item in detailTitles" :key="item">{{ item }}</div>
            </div>
            <div class="item fx">
              <div>产品名称</div>
              <div>{{ orderTypeEnum[eventData.order.orderType] }}</div>
            </div>
            <div class="item fx">
              <div>用车时间</div>
              <div>{{ eventData.order.useTime }}</div>
            </div>
            <div class="item fx">
              <div>订单状态</div>
              <div>{{ orderStatusEnum[eventData.order.status] }}</div>
            </div>
            <div class="item fx">
              <div>订单号</div>
              <div>{{ eventData.order.id }}</div>
            </div>
          </div>
          <h3>申诉过程</h3>
          <el-table :data="eventData.process" style="width: 100%">
            <el-table-column label="动作" prop="action" align="center" />
            <el-table-column label="内容" prop="content" align="center" />
            <el-table-column label="创建时间" prop="createTime" align="center" />
            <el-table-column label="附件" prop="file" align="center">
              <template #default="scope">
                <div class="item" v-for="(item, i) in scope.row.file" :key="i">
                  <template v-if="item.type == 'png' || item.type == 'jpg'">
                    <el-image style="width: 60px" :src="item.url"></el-image>
                  </template>
                  <template v-if="item.type == 'mp3'">
                    <div>开始时间-{{ item.startTime }}</div>
                    <div>结束时间-{{ item.endTime }}</div>
                    <audio controls :src="item.url"></audio>
                  </template>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-col>
    <el-col :lg="6">
      <div class="right">
        <h3>违规处理</h3>
        <listForm :id="String(route.query.id)" ref="registerForm"></listForm>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import OrderApi from "@/api/order";
import { bizTypeEnum, orderTypeEnum, bizTypeArr, orderTypeArr, orderStatusEnum } from "@/enums/common";
import listForm from "./Form.vue";
const route = useRoute();
const id = route.query.id; // 获取传递的 id 参数
const eventData = ref({
  event: { status: null, channelStatus: null, content: "", createTime: "", type: null, file: null },
  order: { orderType: "", bizType: "", useTime: "", status: "", id: "" },
  process: [],
});
const detailTitles = ref(["类型", "内容", "操作"]);
const appealTitles = ref(["处理人", "处理类型", "内容", "时间", "附件"]);

onMounted(() => {
  OrderApi.getEventDetail({ eventId: route.query.id }).then((res: any) => {
    if (res.code == 0) {
      eventData.value = res.result;
    }
  });
});
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  max-width: 100vw !important;
  .content {
    background: #fff;
    padding: 18px 14px;
    .order_id {
      font-size: 22px;
      font-weight: bold;
    }
    .remark {
      background: #f3f4f6;
      padding: 8px;
      margin: 8px 0;
    }
    .info {
      display: flex;
      flex-wrap: wrap;
      line-height: 3;
      div {
        width: 30%;
      }
    }
    .table {
      width: 100%;
      h3 {
        font-weight: bold;
        margin: 14px 0;
      }
      .detail {
        .title {
          background: #f3f4f6;
          height: 50px;
          line-height: 50px;
          display: flex;
          div {
            width: 30%;
            margin-left: 14px;
          }
        }
        .item {
          height: 50px;
          border-bottom: 1px solid #d7dadc;
          margin-left: 14px;
          div {
            width: 30%;
            margin-left: 14px;
          }
        }
      }
    }
  }
  .right {
    background: #fff;
    padding: 14px;
  }
}
.fx {
  display: flex;
  align-items: center;
}
</style>
